<template>
  <div class="Consignment">
    <div class="ele-title-1"><h4>订单详情</h4></div>
    <div class="ele-alert">
      <el-alert
        v-if="goodsInfo.hasUrgent == '1'"
        title="该订单存在加急配送，请及时处理"
        type="error"
        effect="dark"
        :closable="false"
      />
      <p />
      <el-alert
        v-if="goodsInfo.hasSubscribe == '1'"
        title="该订单存在预约配送，请及时处理"
        type="success"
        effect="dark"
        :closable="false"
      />
    </div>
    <div class="ele-title-2"><h2>状态:待发货</h2></div>
    <div class="ele-Payment">
      <p>
        <span class="p-ele-ment">订单号:{{ goodsInfo.orderSn }}</span>
        <span class="p-ele-pay">交易号:{{ goodsInfo.payId }}</span>
        <span v-if="goodsInfo.selfCode" class="p-ele-selfCode">自提码:{{ goodsInfo.selfCode }}</span>
      </p>
      <p>下单时间:{{ goodsInfo.addTime }}</p>
    </div>
    <div class="ele-button">
      <!--      <el-button
        class="ele-btn"
        type="primary"
        @click="goDelivery(goodsInfo)"
      >去发货</el-button>-->
      <!--      <el-button
        v-if="goodsInfo.isSelfPick === 1"
        class="ele-btn"
        type="primary"
        @click="packGoods(goodsInfo)"
      >配货</el-button>-->
      <!--      <el-button
        class="ele-btn"
        type="primary"
        @click="cancelOrder"
      >取消订单</el-button>-->
    </div>
    <!--*
    *
    *
    *
    *
       发货信息 -->
    <div v-if="packageList.length>0" class="custom-radio">
      <el-radio-group v-model="fhxxBg">
        <el-radio-button
          v-for="(item, index) in packageList.length"
          :key="index"
          :label="index"
        >{{ `包裹${toChinesNum(index + 1)}` }}</el-radio-button>
      </el-radio-group>
    </div>
    <div v-if="packageList.length>0" class="cus-baoguo">
      <div class="left">
        <div class="tops">
          <div class="cus-btns">
            <!-- <p>
              <el-button
                type="text"
                @click="$router.push({ name: 'TBRBTUModify' })"
              >修改</el-button>
            </p> -->
            <!-- <p><el-button type="primary">确认已收货</el-button></p> -->
          </div>
          <div class="cus-middle">
            <p>
              <span>发货时间:</span><span class="margin">
                {{
                  packageList.length > 0
                    ? packageList[fhxxBg].deliveryTime
                    : '无数据'
                }}
              </span>
            </p>
            <p>
              <span>收货时间:</span><span>
                {{
                  packageList.length > 0
                    ? packageList[fhxxBg].deliveryTime
                    : '无数据'
                }}
              </span>
            </p>
          </div>
          <div class="cus-middle">
            <p>
              <span>发货方式:</span><span v-if="packageList.length > 0 && packageList[fhxxBg]['deliverySn'] == 0" class="margin">自提</span><span v-else-if="packageList.length > 0 && packageList[fhxxBg]['deliverySn'] == 1" class="margin">普通配送</span><span v-else-if=" packageList.length > 0 && packageList[fhxxBg]['deliverySn'] == 2" class="margin">快递配送</span>
            </p>
            <p>
              <el-button
                type="text"
                @click="changePackInfo(fhxxBg)"
              >修改包裹配送信息</el-button>
              <!--              <el-button type="primary" @click="cancelPackage(packageList[fhxxBg].packId)">取消包裹</el-button>-->
            </p>
          </div>
          <!--          <p>
            <span>发货人:</span>
            <span>
              {{
                packageList.length > 0 ? packageList[fhxxBg].optUser : '无数据'
              }}
            </span>
          </p>-->
          <p>
            <span>送货人:</span><span>
              {{
                packageList.length > 0
                  ? packageList[fhxxBg].deliveryUser
                  : '无数据'
              }}
            </span>
          </p>
          <p>
            <span>配货人:</span><span>
              {{
                packageList.length > 0
                  ? packageList[fhxxBg].distributionUser
                  : '无数据'
              }}
            </span>
          </p>
        </div>
        <div class="bottoms">
          <div
            v-for="(item, index) in packageList.length > 0
              ? packageList[fhxxBg].goodsList
              : []"
            :key="index"
            class="cus-list"
          >
            <div class="cus-left">
              <img :src="item.goodsPic" alt="加载失败">
            </div>
            <div class="cus-right">
              <p>{{ item.goodsName + 'X' + item.number }}</p>
              <p class="cus-font">规格:{{ item.goodsSpec }}</p>
              <p>设备编号:</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <p class="right-title">配送状态</p>
        <el-steps
          direction="vertical"
          :active="
            packageList.length > 0 ? packageList[fhxxBg].stateList.length : 0
          "
          :space="50"
          style="margin-top:30px"
        >
          <el-step
            v-for="(item, index) in packageList.length > 0
              ? packageList[fhxxBg].stateList
              : []"
            :key="index"
            :title="item.deliveryTime"
            :description="item.deliveryState"
          />
        </el-steps>
      </div>
    </div>
    <div class="ele-content-info">
      <ul>
        <li>
          <span class="ele-title-txt">收货信息</span>
          <!--          <el-button type="text" style="margin:0;padding:0px">复制</el-button>-->
        </li>
        <li>
          <span class="ele-font-left">收货人:</span><span class="ele-font">{{ OrderDetail.receiverName }}</span>
        </li>
        <li>
          <span class="ele-font-left">电话:</span><span class="ele-font">{{ OrderDetail.receiverPhone }}</span>
        </li>
        <li>
          <span class="ele-font-left">收货地址:</span><span class="ele-font shdz">{{ OrderDetail.receiverAddress }}</span>
        </li>
      </ul>

      <ul>
        <li><span class="ele-title-txt">下单信息</span></li>
        <li>
          <span class="ele-font-left">运费:</span><span>{{ OrderDetail.freightPrice }}</span>
        </li>
        <li><span class="ele-font-left">下单门店:</span><span>{{ OrderDetail.storeName }}</span></li>
        <li>
          <span class="ele-font-left">门店地址:</span><span class="mddz"> {{ OrderDetail.storeAddress }} </span>
        </li>
      </ul>

      <ul>
        <li><span class="ele-title-txt">买家信息</span></li>
        <li>
          <span class="ele-font-left">买家:</span><span>{{ OrderDetail.userName }}</span>
        </li>
        <li>
          <span class="ele-font-left">备注:</span><span>{{ OrderDetail.userPhone }}</span>
        </li>
      </ul>

      <ul>
        <li><span class="ele-title-txt">支付信息</span></li>
        <li>
          <span class="ele-font-left">支付方式:</span><span>{{
            OrderDetail.payType == 'WEIXIN'
              ? '微信'
              : OrderDetail.payType == 'WEIXINPAYSCORE'
                ? '支付分'
                : '阿里'
          }}</span>
        </li>
        <li>
          <span class="ele-font-left">支付金额:</span><span>{{ OrderDetail.payAmount }}</span>
        </li>
      </ul>
    </div>

    <div v-for="(item, index) in goodsList" :key="index">
      <div v-if="item.goodsType === 'sale'">
        <el-table
          :data="item.goodsList"
          class="ele-table"
          :span-method="objectSaleSpanMethod"
          :header-cell-style="hearderCellStyle"
        >
          <el-table-column label="商品" prop="goodsPic" width="100" fixed="left">
            <template slot-scope="scope">
              <img
                :src="scope.row.goodsPic"
                width="80"
                height="80"
                alt="加载失败"
              >
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" width="250" fixed="left">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.goodsName }}</span>
                <span
                  v-if="scope.row.deviceType == '0'"
                  class="custom"
                >软链</span>
                <span
                  v-if="scope.row.deviceType == '1'"
                  class="custom"
                >医柜</span>
              </div>
              <div>{{ scope.row.goodsSpec }}</div>
              <div>{{ scope.row.deviceNo }}</div>
            </template>
          </el-table-column>
          <el-table-column label="单价" prop="price" width="200">
            <template slot-scope="scope">
              {{ '￥' + scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="number" width="200">
            <template slot-scope="scope">
              {{ scope.row.number }}
            </template>
          </el-table-column>
          <el-table-column label="类型" prop="goodsType" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.goodsType == 'lease'">租赁</span>
              <span v-else>售卖</span>
            </template>
          </el-table-column>
          <el-table-column label="运费" width="100">
            <template slot-scope="scope">
              <p v-if="scope.row.deliverySn == 'normal'">普通配送</p>
              <p v-if="scope.row.deliverySn == 'self'">自提配送</p>
              <p v-if="scope.row.deliverySn == 'subscribe'">预约配送</p>
              <p v-if="scope.row.deliverySn == 'urgent'">加急</p>
              <p>{{ scope.row.freightPrice }}</p>
            </template>
          </el-table-column>
          <el-table-column label="优惠" width="100" />
          <el-table-column label="合计" prop="totalPrice" width="100">
            <template slot-scope="scope">
              {{ '￥' + scope.row.totalPrice }}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="orderState" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.orderState == 101">待付款</span>
              <span v-else-if="scope.row.orderState == 201">待发货</span>
              <span v-else-if="scope.row.orderState == 302">待用户自提</span>
              <span v-else-if="scope.row.orderState == 301">待用户收货</span>
              <span v-else-if="scope.row.orderState == 401">使用中</span>
              <span v-else-if="scope.row.orderState == 501">待商家取货</span>
              <span v-else-if="scope.row.orderState == 502">待商户收货</span>
              <span v-else-if="scope.row.orderState == 503">待用户结算</span>
              <span v-else-if="scope.row.orderState == 601">订单取消</span>
              <span v-else-if="scope.row.orderState == 701">超时已关闭</span>
              <span v-else-if="scope.row.orderState == 801">已完成</span>
              <span v-else>{{ scope.row.orderState }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                class="ele-btn"
                style="width: 200px;"
                type="primary"
                @click="changeOrderStatus(item.orderSn,item.goodsType,scope.row.orderState)"
              >变更当前子订单状态</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="ele-bzm">
          <p>备注:{{ item.remark || '无备注' }}</p>
          <p class="ele-p-right">
            <span>子订单号:{{ item.orderSn }}</span><span>门店:{{ item.storeName }}</span>
          </p>
        </div>
      </div>
      <div v-if="item.goodsType === 'lease'">
        <el-table
          :data="item.goodsList"
          class="ele-table"
          :span-method="objectRentSpanMethod"
          :header-cell-style="hearderCellStyle"
        >
          <el-table-column label="商品" prop="goodsPic" width="100" fixed="left">
            <template slot-scope="scope">
              <img
                :src="scope.row.goodsPic"
                width="80"
                height="80"
                alt="加载失败"
              >
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" width="250" fixed="left">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.goodsName }}</span>
                <span
                  v-if="scope.row.deviceType == '0'"
                  class="custom"
                >软链</span>
                <span
                  v-if="scope.row.deviceType == '1'"
                  class="custom"
                >医柜</span>
              </div>
              <div>{{ scope.row.goodsSpec }}</div>
              <div>{{ scope.row.deviceNo }}</div>
            </template>
          </el-table-column>
          <el-table-column label="单价" prop="price" width="100">
            <template slot-scope="scope">
              {{ '￥' + scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="number" width="100">
            <template slot-scope="scope">
              {{ scope.row.number }}
            </template>
          </el-table-column>
          <el-table-column label="押金" prop="depositPrice" width="100">
            <template slot-scope="scope">
              {{ scope.row.depositPrice + '元' }}
            </template>
          </el-table-column>
          <el-table-column label="类型" prop="goodsType" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.goodsType == 'lease'">租赁</span>
              <span v-else>售卖</span>
            </template>
          </el-table-column>
          <el-table-column label="运费" width="100">
            <template slot-scope="scope">
              <p v-if="scope.row.deliverySn == 'normal'">普通配送</p>
              <p v-if="scope.row.deliverySn == 'self'">自提配送</p>
              <p v-if="scope.row.deliverySn == 'subscribe'">预约配送</p>
              <p v-if="scope.row.deliverySn == 'urgent'">加急</p>
              <p>{{ scope.row.freightPrice }}</p>
            </template>
          </el-table-column>
          <el-table-column label="优惠" width="100" />
          <el-table-column label="租期" prop="leaseDay" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.leaseDay">
                {{ scope.row.leaseDay }}
              </span>
              <span v-else>————</span>
            </template>
          </el-table-column>
          <el-table-column label="合计" prop="totalPrice" width="100">
            <template slot-scope="scope">
              {{ '￥' + scope.row.totalPrice }}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="orderState" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.orderState == 101">待付款</span>
              <span v-else-if="scope.row.orderState == 201">待发货</span>
              <span v-else-if="scope.row.orderState == 302">待用户自提</span>
              <span v-else-if="scope.row.orderState == 301">待用户收货</span>
              <span v-else-if="scope.row.orderState == 401">使用中</span>
              <span v-else-if="scope.row.orderState == 501">待商家取货</span>
              <span v-else-if="scope.row.orderState == 502">待商户收货</span>
              <span v-else-if="scope.row.orderState == 503">待用户结算</span>
              <span v-else-if="scope.row.orderState == 601">订单取消</span>
              <span v-else-if="scope.row.orderState == 701">订单已关闭</span>
              <span v-else-if="scope.row.orderState == 801">已完成</span>
              <span v-else>{{ scope.row.orderState }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                class="ele-btn"
                style="width: 200px;"
                type="primary"
                @click="changeOrderStatus(item.orderSn,item.goodsType,scope.row.orderState)"
              >变更当前子订单状态</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="ele-bzm">
          <p>备注:{{ item.remark || '无备注' }}</p>
          <p class="ele-p-right">
            <span>子订单号:{{ item.orderSn }}</span><span>门店:{{ item.storeName }}</span>
          </p>
        </div>
      </div>
    </div>
    <el-dialog
      title="选择配货员"
      :visible.sync="packDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <h4>选择配送员</h4>
      <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
        <el-radio-group v-for="(item,index) in packList" :key="index" v-model="packUserId">
          <el-radio :label="item.id">
            <span>配货员:{{ item.userName }} {{ item.phone }}</span>
          </el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPack">提 交</el-button>
      </span>
    </el-dialog>

    <!-- 切换当前子订单状态   -->
    <el-dialog :visible.sync="visible_subOrder" title="切换当前子订单状态" :modal="false">
      <el-form ref="orderForm" :model="orderForm" :rules="orderRules">
        <el-row style="background-color: #F7F7F7;padding-top: 22px;">
          <el-form-item prop="status" label="子订单状态：">
            <el-select v-model="orderForm.status" placeholder="请选择需要切换的子订单状态">
              <el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitSubOrder">确认</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
/** 代发货 */
import { rentOrderDetail, packByself, cancelPack, updateChildOrderStatus } from '@/api/order'
import { toChinesNum } from '@/utils/chineseNum'
/* import { StaffMangeList } from '@/api/customAPI/shop/staffManage'*/
export default {
  name: 'Consignment',
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      // 订单详情
      OrderDetail: {},
      fhxxBg: 0,
      // 包裹信息
      packageList: [],
      packList: [],
      packUserId: '',
      // 子订单商品列表
      goodsList: [],
      // 详细信息
      goodsInfo: {},
      // 配货员弹框
      packDialogVisible: false,

      /** 切换子订单状态*/
      visible_subOrder: false,
      orderForm: {
        childOrderCode: null,
        status: null
      },
      statusList: [
        { id: 101, name: '待付款' },
        { id: 201, name: '待发货' },
        { id: 302, name: '待用户自提' },
        { id: 301, name: '待用户收货' },
        { id: 401, name: '使用中' },
        { id: 501, name: '待商家取货' },
        { id: 502, name: '待商户取货' },
        { id: 503, name: '待用户结算' },
        { id: 601, name: '订单取消' },
        { id: 701, name: '订单已关闭' },
        { id: 801, name: '已完成' }
      ],
      orderRules: {
        status: [{ required: true, message: '请选择变更的子订单状态', trigger: ['blur', 'change'] }]
      }
    }
  },
  mounted() {
    this.initailInfo()
  },
  activated() {
    this.initailInfo()
  },
  methods: {
    toChinesNum,
    /** 配货*/
    /* packGoods(info) {
      this.packDialogVisible = true
      StaffMangeList({ page: 1, limit: 0, storeId: info[0].storeId }).then(res => {
        const staffList = res.data.data.list
        staffList.forEach(item => {
          if (item.roles.includes('1')) {
            this.packList.push(item)
          }
        })
        this.packList.unshift({
          id: 'all',
          userName: '全部一起抢单',
          phone: ''
        })
        this.packList.unshift({
          id: 'sort',
          userName: '按顺序抢单',
          phone: ''
        })
      })
    },*/
    /** 变更当前子订单状态*/
    changeOrderStatus(orderSn, goodsType, orderState) {
      this.visible_subOrder = true
      this.orderForm.childOrderCode = orderSn
      const stateList = this.statusList
      this.statusList.forEach((item, index) => {
        if (item.id == orderState) {
          stateList.splice(index, 1)
        }
        if (goodsType == 'sale') {
          if (item.id == 401 || item.id == 501 || item.id == 502 || item.id == 503) {
            stateList.splice(index, 1)
          }
        }
      })
      this.statusList = stateList
    },

    /** 提交修改子订单状态*/
    submitSubOrder() {
      this.$refs.orderForm.validate(v => {
        if (v) {
          this.$confirm('是否变更当前子订单状态?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const data = this.$XEUtils.clone(this.orderForm, true)
            updateChildOrderStatus(data).then(res => {
              this.$notify.success({
                title: '成功',
                message: '子订单状态修改成功'
              })
              this.visible_subOrder = false
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$router.go(-1)
            }).catch(() => {
              /* console.log('修改子订单状态异常')*/
              /* this.$message.error('修改子订单状态异常')*/
            })
          }).catch(() => {
            this.$notify({
              type: 'info',
              message: '已取消操作'
            })
          })
        }
      })
    },

    /** 修改包裹信息*/
    changePackInfo(index) {
      const params = this.$dd(this.$route.query.p)
      this.$router.push({
        name: 'TBRBTUModify',
        query: {
          p: this.$ed({
            orderId: params.rows.suboId,
            packId: this.packageList[index].packId,
            state: params.status
          })
        }
      })
    },
    handleClose(e) {
      /* console.log(e)*/
    },
    /** 发货 */
    goDelivery(info) {
      const params = this.$dd(this.$route.query.p)
      /* console.log(params)*/
      this.$router.push({
        name: 'TBRBTUModify',
        query: {
          p: this.$ed({
            orderId: params.rows.suboId,
            packId: '',
            state: params.status
          })
        }
      })
    },
    /** 取消包裹*/
    cancelPackage(id) {
      this.$confirm('是否删除包裹?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelPack({ id: id }).then(res => {
          this.$notify.success({
            title: '成功',
            message: '取消包裹成功'
          })
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    /* */
    submitPack() {
      const params = this.$dd(this.$route.query.p)
      packByself({ orderId: params.rows.orderId, packUserId: this.packUserId }).then(res => {
        /* console.log(res.data.data)*/
      })
    },
    initailInfo() {
      const params = this.$route.params
      if (params) {
        rentOrderDetail({
          state: params.status,
          orderId: params.rows.suboId,
          bigOrderId: params.rows.bigOrderId
        })
          .then(result => {
            this.OrderDetail = result.data.data.receiveInfo
            this.goodsList = result.data.data.subOrderList
            this.goodsInfo = result.data.data
            if (result.data.data.packageList) {
              /* console.log(result.data.data.packageList)*/
              this.packageList = result.data.data.packageList
            }
          })
          .catch(() => {})
      }
    },
    hearderCellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      }
    },
    objectSaleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 9) {
        if (rowIndex == 0) {
          for (let i = 0; i < this.goodsList.length; i++) {
            if (this.goodsList[i].orderId == row.orderId) {
              return {
                rowspan: this.goodsList[i].goodsList.length,
                colspan: 1
              }
            }
          }
        }
      }
    },
    objectRentSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 11) {
        if (rowIndex == 0) {
          for (let i = 0; i < this.goodsList.length; i++) {
            if (this.goodsList[i].orderId == row.orderId) {
              return {
                rowspan: this.goodsList[i].goodsList.length,
                colspan: 1
              }
            }
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.Consignment {
  padding: 50px 100px;
  .ele-title-2 {
    margin-top: 40px;
  }
  .custom-radio {
    margin: 30px 0px;
  }
  .cus-baoguo {
    border-radius: 5px;
    border: 1px solid #e6e6e6;
    display: flex;
    .left,
    .right {
      padding: 30px;
    }
    .left {
      flex-basis: 60%;
      border-right: 1px solid #e6e6e6;
      position: relative;
      .cus-btns {
        position: absolute;
        display: flex;
        right: 0;
        top: 0;
        .el-button {
          margin: 0px 20px;
        }
      }
      .tops {
        p {
          margin: 10px 0px;
          span:first-child {
            display: inline-block;
            width: 80px;
          }
        }
        .cus-middle {
          margin: 0;
          padding: 0;
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .margin {
            margin-right: 20px;
          }
          .el-button {
            margin-left: 20px;
          }
        }
      }
      .bottoms {
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
        .cus-list {
          width: 400px;
          display: flex;
          align-items: center;
          .cus-left {
            width: 100px;
            height: 100px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .cus-right {
            margin-left: 20px;
            .cus-font {
              font-size: 14px;
              color: gray;
            }
          }
        }
      }
    }
    .right {
      flex-grow: 1;
      position: relative;
      .right-title {
        position: absolute;
        top: 10px;
      }
    }
  }
  .ele-Payment {
    width: 100%;
    border: 2px solid #f3f3f3;
    border-radius: 5px;
    padding-left: 20px;
    p {
      padding: 5px 0px 2.5px 0px;
      color: gray;
      .p-ele-ment {
        margin-right: 15px;
      }
      .p-ele-pay {
        margin-left: 30px;
        color: black;
      }
      .p-ele-selfCode {
        margin-left: 30px;
        color: black;
      }
    }
    p:last-child {
      color: black;
    }
  }
  .ele-button {
    margin: 30px 0px 30px 0px;
    .ele-btn {
      width: 100px;
    }
  }
  .ele-content-info {
    background: #f3f3f3;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    ul,
    li {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
    }
    ul {
      padding: 20px 60px 20px 20px;
      li {
        padding: 10px 0px;
        font-size: 15px;
        display: flex;
        align-items: flex-start;
      }
      .ele-title-txt {
        font-size: 16px;
        font-weight: bold;
        margin-right: 20px;
      }
      .ele-font {
        color: gray;
      }
      .ele-font-left {
        display: inline-block;
        width: 80px;
      }
      .shdz,
      .mddz {
        display: inline-block;
        width: 300px;
      }
    }
  }
  .ele-table {
    margin-top: 40px;
    .custom {
      font-size: 12px;
      display: inline-block;
      background: #2db300;
      color: white;
      padding: 1px 5px;
    }
  }
  .ele-bzm {
    display: flex;
    justify-content: space-between;
    .ele-p-right {
      span:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
